import React from 'react';
import { Table } from 'antd';
import './index.less';

export default class ETable extends React.Component {
  state = {};

  //处理行点击事件
  onRowClick = (record, index) => {
    let rowSelection = this.props.rowSelection;
    if (rowSelection == 'checkbox') {
      let selectedRowKeys = this.props.selectedRowKeys || [];
      let selectedRows = this.props.selectedRows || [];
      let selectedIds = this.props.selectedIds;
      if (selectedIds) {
        const i = selectedIds.indexOf(record.id);
        if (i == -1) {
          //避免重复添加   //todo kim-stamp 点击有毛病的地方
          selectedIds.push(record.id);
          selectedRowKeys.push(index);
          selectedRows.push(record);
        } else {
          // selectedIds.splice(i, 1);
          selectedRowKeys.splice(i, 1);
          selectedRows.splice(i, 1);
        }
      } else {
        // selectedIds = [record.id];
        selectedRowKeys = [index];
        selectedRows = [record];
      }
      this.props.updateSelectedItem(selectedRowKeys, selectedRows || {});
    } else {
      let selectKey = [index];
      const selectedRowKeys = this.props.selectedRowKeys;
      if (selectedRowKeys && selectedRowKeys[0] == index) {
        return;
      }
      this.props.updateSelectedItem(selectKey, record || {});
    }
  };

  // 选择框变更
  onSelectChange = (selectedRowKeys, selectedRows) => {
    let rowSelection = this.props.rowSelection;
    const selectedIds = [];
    if (rowSelection == 'checkbox') {
      selectedRows.map(item => {
        selectedIds.push(item.id);
      });
      this.setState({
        selectedRowKeys,
        selectedIds: selectedIds,
        selectedRows: selectedRows[0],
      });
    }
    this.props.updateSelectedItem(selectedRowKeys, selectedRows[0], selectedIds);
  };

  onSelectAll = (selected, selectedRows, changeRows) => {
    let selectedIds = [];
    let selectKey = [];
    selectedRows.forEach((item, i) => {
      selectedIds.push(item.id);
      selectKey.push(i);
    });
    this.props.updateSelectedItem(selectKey, selectedRows[0] || {}, selectedIds);
  };

  getOptions = () => {
    let p = this.props;
    const name_list = {
      订单编号: 170,
      车辆编号: 80,
      手机号码: 96,
      用户姓名: 70,
      密码: 70,
      运维区域: 300,
      车型: 42,
      故障编号: 76,
      代理商编码: 97,
      角色ID: 64,
    };
    if (p.columns && p.columns.length > 0) {
      p.columns.forEach(item => {
        //开始/结束 时间
        if (!item.title) {
          return;
        }
        if (!item.width) {
          if (item.title.indexOf('时间') > -1 && item.title.indexOf('持续时间') < 0) {
            item.width = 132;
          } else if (item.title.indexOf('图片') > -1) {
            item.width = 86;
          } else if (item.title.indexOf('权限') > -1 || item.title.indexOf('负责城市') > -1) {
            item.width = '40%';
            item.className = 'text-left';
          } else {
            if (name_list[item.title]) {
              item.width = name_list[item.title];
            }
          }
        }
        item.bordered = true;
      });
    }

    const rowSelection = {
      type: 'checkbox',
      selectedRowKeys: this.props.selectedRowKeys,
      onSelect: (record, selected, selectedRows) => {},
      onChange: this.onSelectChange,
      onSelectAll: this.onSelectAll,
    };

    // 当属性为false或者null时，说明没有单选或者复选列
    let _rowSelection = this.props.rowSelection;
    if (_rowSelection === false || _rowSelection === null) {
      _rowSelection = false;
    } else if (_rowSelection == 'checkbox') {
      rowSelection.type = 'checkbox'; //设置类型未复选框
    } else if (_rowSelection == 'radio') {
      rowSelection.type = 'radio'; //默认未单选
    } else {
      rowSelection.type = ''; //默认未单选
    }

    return (
      <Table
        className="card-wrap page-table"
        // bordered
        {...this.props}
        rowSelection={_rowSelection ? rowSelection : null}
        onRow={(record, index) => ({
          onClick: () => {
            if (!_rowSelection) {
              return;
            }
            this.onRowClick(record, index);
          },
        })}
      />
    );
  };

  rende() {
    return <div>{this.getOptions()}</div>;
  }
}
